<template>
  <div>
    <!-- 面包屑导航 -->
    <v-bread></v-bread>
    <!-- 按钮 -->
    <el-button type="primary" plain size="small" @click="addDialog"
      >添加</el-button
    >

    <!-- 表格 -->
    <v-list @edit="edit"></v-list>

    <!-- 弹窗表格 -->
    <v-dialog :roleInfo="roleInfo" @cancel="cancel" ref="diainfo"></v-dialog>
  </div>
</template>
<script>
import vList from "./list.vue";
import vDialog from "./dialog.vue";
export default {
  components: {
    vList,
    vDialog,
  },
  data() {
    return {
      roleInfo: {
        isShow: false,
        isAdd: true,
      },
    };
  },
  methods: {
    //添加按钮 打开弹框
    addDialog() {
      // console.log("111");
      // 弹框状态
      this.roleInfo.isShow = true;
      // 是否添加
      this.roleInfo.isAdd = true;
    },
    // 取消状态 给父级
    cancel(e) {
      this.roleInfo.isShow = e;
    },
    edit(e) {
      // console.log(e);
      // 调用弹窗修改事件
      // 打开弹窗 修改
      this.roleInfo = {
        isShow: true,
        isAdd: false,
      };
      // 调用子的事件
      this.$refs.diainfo.lookup(e);
    },
  },
};
</script>
<style lang="less" scoped>
.el-button--small {
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>